<template>
  <div class="task-card-container">
    <header>
      <span class="title">{{ TaskCardSettings.name }}</span>
      <span :class="['tag', generateLevel(TaskCardSettings.status)]">
        {{ TaskCardSettings.status }}
      </span>
    </header>
    <section>
      <span>操作人: {{ TaskCardSettings.operator }}</span>
      <span>保存时间: {{ TaskCardSettings.savetime }}</span>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import UserList from '@/components/basic/UserList.vue'
import { TaskCardType } from '@/interface/Basic'
import { Dictionary } from 'vue-router/types/router'
@Component({
  components: {
    UserList
  }
})
class TaskCard extends Vue {
  @Prop({ required: true }) TaskCardSettings!: TaskCardType
  generateLevel(status: string) {
    const mapStatus: Dictionary<string> = {
      已完成: 'isGreen',
      不合格: 'isRed',
      异常停止: 'isRed',
      让步放行: 'isYellow',
      异常继续: 'isYellow',
      未完成: 'isGrey'
    }
    return mapStatus[status]
  }
}
export default TaskCard
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.task-card-container {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
  border: solid 1px;
  transition: all 0.5s ease;
  #flex(column, flex-start, space-between);
  #color(color, --primary-text-color);
  #color(border-color, --primary-border-color);
  #color(background-color, --module-bg-color);
  header {
    width: 100%;
    margin-bottom: 5px;
    #flex(row, center, space-between);
    span {
      font-size: 14px;
      #color(color, --primary-text-color);
    }
    .tag {
      box-sizing: border-box;
      padding: 2px 6px;
      border-radius: 2px;
      font-size: 12px;
      color: #ffffff;
    }
    .isGreen {
      #color(background-color, --primary-green-color);
    }
    .isRed {
      #color(background-color, --primary-red-color);
    }
    .isYellow {
      #color(background-color, --primary-yellow-color);
    }
    .isGrey {
      #color(background-color, --primary-hover-text-color);
    }
  }
  section {
    #flex(column, flex-start, flex-start);
    span {
      font-size: 14px;
      margin-bottom: 5px;
      text-align: left;
      white-space: nowrap;
    }
    span:last-child {
      margin-bottom: 0;
    }
  }
}
.task-card-container:hover {
  // transform: translateY(-5px);
  #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
}
</style>
